<template>
    <div>
        <div class="e-table">
            <div class="top">
                <div class="left">
                    <div>
                        <el-button
                            size="small"
                            style="background: #7aa818; color: #fff"
                            @click="goCtAdd"
                            >新增</el-button
                        >
                    </div>
                    <div style="padding-left: 10px; cursor: pointer;" @click="batchOperation">
                        <img src="@/assets/piliang.png">
                        <span style="padding-left: 8px;">{{batch}}</span>
                    </div>
                </div>
                <div class="right">
                    <div>
                        <el-input
                            placeholder=""
                            v-model="like"
                            size="small"
                            @keydown.enter.native="fuzzySearchEnter"
                            @blur="likeSearch"
                        >
                        <i slot="suffix" class="el-icon-search like" @click="likeSearch"></i>
                        </el-input>
                    </div>
                    <div>
                        <el-button
                            size="small"
                            style="background: #2e61d7; color: #fff"
                            @click="dialogVisible = true"
                            >高级搜索</el-button
                        >
                    </div>
                </div>
            </div>
            <el-table
                ref="table"
                :data="tableData"
                border
                style="width: 100%"
                @cell-mouse-enter="cellMouseEnter"
                @cell-mouse-leave="cellMouseLeave"
                @cell-click="tableDbShow"
            >
                <el-table-column type="selection" width="50" v-if="isBatch">
                </el-table-column>
                <el-table-column fixed label="操作" width="100">
                    <template slot-scope="scope">
                        <i
                            id="iconEdit"
                            style="
                                cursor: pointer;
                                font-size: 20px;
                            "
                            class="el-icon-edit"
                            @click="tableDbEdit(scope.row.ctsubcontractId)"
                        ></i>
                    </template>
                </el-table-column>
                <el-table-column fixed label="合同编号" width="250">
                    <template slot-scope="scope">
                        <span style="color:blue">{{scope.row.ctCode}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="合同名称" width="200">
                </el-table-column>
                <el-table-column prop="" label="合同净价(元)" width="130">
                </el-table-column>
                <el-table-column prop="" label="合同金额(元)" width="130">
                </el-table-column>
                <el-table-column prop="" label="合同工期(月)" width="130">
                </el-table-column>
                <el-table-column prop="" label="甲方" width="200">
                </el-table-column>
                <el-table-column prop="" label="编制机构" width="200">
                </el-table-column>
                <el-table-column prop="ctState" label="状态" width="100">
                    <template slot-scope="scope">
                        <span>
                            {{options.ctStateForm[scope.row.ctState]}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="变更次数" width="100">
                </el-table-column>
                <el-table-column prop="" label="变更台账">
                </el-table-column>
            </el-table>
            <!-- <ComPagination
                :total="pagination.total"
                :pageSize.sync="pagination.pageSize"
                :currentPage.sync="pagination.currentPage"
                @currentChange="tenderApplyListByEntity"
                @sizeChange="tenderApplyListByEntity"
            /> -->
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
//import ComPagination from '@/components/pagination/pagination'
export default {
    data () {
        return {
            isBatch: false, //是否进入批量操作
            batch: '进入批量管理',
            like: '', //模糊查询
            queryForm: {  //高级查询
                Organization: '',
                bName: '',
                ctMoney1: null,
                ctMoney2: null,
                ctName: '',
                ctType: null,
                endTime: '',
                key: '',
                limit: 5,
                page: 1,
                startTime: '',
                state: null
            },
            dialogVisible: false,
            dialogFormVisible: false,
            tableData: [], //表格数据
            currentPage: 1,
            totalPage: 5, //总页数
            limit: 5, //每页限制条数
            page: 1, //当前页数
            srcollDome: '',
            MouseEnterId: 0,
            // pagination: {
            //     total: 0,
            //     pageSize: 10,
            //     currentPage: 1
            // },
        }
    },
    mounted () {
        //this.getContractSubHome()
    },
    computed: {
        ...mapState({
            options: state => state.contract.ctClassify
        })
    },
    components: {
        //ComPagination
    },
    methods: {
        batchOperation () {
            this.isBatch = !this.isBatch
            if(this.isBatch) {
                this.batch = '退出批量管理'
                this.$refs.table.clearSelection()
            }else{
                this.batch = '进入批量管理'
            }
        },
        //获取合同列表
        getContractSubHome () {
            this.$Ajax.httpPost({
                url: '/contract/CtConveyancePsdreparationd/homepageByEntity',
                params: {
                    ctCode: null,
                    limit: this.limit,
                    page: this.page
                }
            }).then(res => {
                this.tableData = res.list
                // this.pagination.total = res.totalCount
            })
        },
        //去新增合同页面
        goCtAdd () {
            this.$router.push('/ctLandlordSginingAdd')
        },
        //双击单元格去查看页面
        tableDbShow (row, column) {
            const id = row.ctsubcontractId
            if(column.label === '合同编号') {
                this.$router.push({ path: '/ctLandlordSginingShow', query: { id } })
            }
        },
        //点击去编辑页面
        tableDbEdit (id) {
            this.$router.push({
                path: '/ctLandlordSginingEdit',
                query: { id }
            })
        },
        //回车键查询
        fuzzySearchEnter (e) {
            if(e.keyCode == 13) {
                console.log(e.keyCode)
                this.likeSearch()
            }
        },
        //模糊查询
        likeSearch () {
            this.pagination.key = this.like
            this.getContractSubHome()
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.ctsubcontractId
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        }
        //高级查询
        // highQuery () {
        //     this.$Ajax.httpPost({
        //         url: '/contract/ctSubContractDrawUp/seniorByEntity',
        //         params: this.queryForm
        //     }).then(res=>{
        //         this.tableData = res.list
        //         this.dialogVisible = true
        //     })
        // },

        // scrollTable () {
        //     this.srcollDome = this.$refs.table.bodyWrapper
        //     this.srcollDome.addEventListener('scroll', ()=> {
        //         this.srcollDome.scrollHeight - this.srcollDome.scrollTop - this.srcollDome.clientHeight
        //         console.log(this.srcollDome.scrollTop)
        //     })
        // },
    },
}
</script>

<style lang="scss" scoped>
::v-deep.el-table .cell {
    text-align: center;
}
::v-deep.el-steps--simple{
    background: #eff2f6;
    margin-bottom: 10px;
}
#iconEdit:hover{
    color: red;
}
.like{
    color: rgb(46,97,215);
    font-size: 17px;
    line-height: 30px;
    cursor: pointer;
}
.dialog-footer {
    text-align: right;
}
.step{
    background: #eff2f6;
    height: 50px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.step ul{
    display: flex;
}
.step ul li span{
    font-size: 16px;
}
.step ul li span:nth-child(1){
    cursor: pointer;
}
.step ul li span:not(:nth-child(1)){
    font-weight: 600;
}
</style>
